<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>美食之家</title>
    <link type="text/css" rel="stylesheet" href="css/public.css" />
    <style type="text/css">
        .top{width: 900px;height: 120px;border: 1px solid black;}
        .middle{width: 900px;height: 400px;border: 1px solid black;}
        li{list-style-type: none;margin:5px 20px;}
        #Cop{margin-top: 60px;margin-left: 10px;font-size: 2em;}
        a{text-decoration: none;display: block;color: aliceblue;}
        .nav{width: 902px;margin-top: 0px;height:30px;background-color:rgb(41, 75, 41);}
        .right#R{margin-top: 0px;}
        #normal{width: 220px;margin:5px 2px;}
        a:hover{background-color:darkseagreen; ;}
        .fo{margin-left: 0;margin-top: 10px;}
    </style>
</head>
<body style="width: 900px;margin:0 auto">
    
    <div class="top">
        <span class="left" id="Cop">TEA</span>
        <span class="right" id="R"><img src="./images/艺术.png" width="200px" height="150px"></span>
    </div>
        <div class="nav">
            <ul>
            <li class="left">
                <a href="#">首页</a>
            </li>
            <li class="left">
                <a href="#">茶叶</a>
            </li>
            <li class="left">
                <a href="#">餐具</a>
            </li>
            <li class="left">
                <a href="#">美食</a>
            </li>
            <li class="left">
                <a href="#">公司</a>
            </li>
        </ul>
    </div>
    <div class="middle" class="clear">
        <div class="fo"><h2>推荐套餐</h2></div>
        <div class="left" id="normal"><img width="200px" height="160px" src="./images/food1.png"/><br>美食1</div>
        <div class="left" id="normal"><img width="200px" height="160px" src="./images/food2.png"/><br>美食2</div>
        <div class="left" id="normal"><img width="200px" height="160px" src="./images/food3.png"/><br>美食3</div>
        <div class="left" id="normal"><img width="200px" height="160px" src="./images/food4.png"/><br>美食4</div>
</body>
</html>